import React from 'react'
import { connect } from 'dva'
import GeneralFilter from 'components/Filter/GeneralFilter'
import List from './List'
import queryString from 'query-string'

import {
  Card,
} from 'antd'
import PageHeaderLayout from 'components/Layout/PageHeaderLayout'
import styles from './List.less'
import { showButton } from 'utils/promissionFilter'


const orderCancels = ({location, dispatch, loading, app,orderList ,orderCancel}) => {

  location.query = queryString.parse(location.search)

  const {
    items,
    pagination,
    auditModalVisible,
    currentItem
  } = orderCancel

  const { user, resources } = app

  const { isShowContractDetailModal, currentContractDetail } = orderList


  const contractDetailModalProps = {
    title: '合同详情',
    visible: isShowContractDetailModal,
    destroyOnClose: true,
    width: 1000,
    currentContractDetail,
    footer: null,
    onCancel(record) {
      dispatch({
        type: 'orderList/hideContractDetailModal',
        payload: {}
      })
    },
    showOrderQuote: showButton('contractDetail.orderQuoteSummary', resources, user),
  }

  const breadcrumbList = [
    {
      title: '订单管理'
    }, {
      title: '合同取消'
    }
  ]

  const listProps = {
    dataSource: items,
    loading: loading.effects['orderCancel/query'],
    pagination,
    pageChangeAction: 'orderCancel/query',
    dispatch,
    location,
    visible: auditModalVisible,
    currentItem,
    app,
    contractDetailModalProps
  }

  // 定义筛选属性 表单相关
  const filterProps = {
    filterItems: [
      {
        type: 'input',
        id: 'contractNum',
        title: '合同号',
        placeholder: '合同号'
      },
    ],
    onFilterChange (value) {
      dispatch({
        type: 'orderCancel/query',
        payload: {
          ...value
        }
      })
    }
  }



  return (
    <PageHeaderLayout title="合同取消" breadcrumbList={breadcrumbList}>
      <Card bordered={false}>
        <div className={styles.tableList}>
          <GeneralFilter {...filterProps} />
          <List {...listProps} />
        </div>
      </Card>
    </PageHeaderLayout>
  )
}

export default connect(({orderCancel, app, orderList,loading}) => ({orderCancel, app,orderList, loading}))(orderCancels)
